<template>
    <div>
      <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单信息</el-breadcrumb-item>
      </el-breadcrumb>
      <!--表格内容显示区域-->
      <el-card class="box-card card" id="card">
      <el-table
        :max-height="this.getTableMaxHeight()"
        v-loading="loading" element-loading-text="数据加载中..."
        :data="page.records"
        border
        size="mini"
        style="width: 100%;">
        <el-table-column
          width="60px"
          align="center"
          type="index"
          label="序号">
        </el-table-column>
        <el-table-column
          width="170px"
          align="center"
          prop="id"
          label="订单号">
          <template slot-scope="scope">
            <span class="el-tag el-tag--primary el-tag--mini el-tag--light">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="350px"
          align="center"
          prop="houseName"
          label="房屋名称">
          <template slot-scope="scope">
            <span class="el-tag el-tag--primary el-tag--mini el-tag--light">{{ scope.row.houseName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100px"
          align="center"
          prop="touristName"
          label="租客名称">
          <template slot-scope="scope">
            <el-tag type="success">{{scope.row.touristName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          align="center"
          prop="touristPhone"
          label="审核反馈">
          <template slot-scope="scope">
            <el-tag type="info">{{scope.row.touristPhone}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          align="center"
          prop="createTime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          width="120px"
          align="center"
          prop="price"
          label="金格(元)">
        </el-table-column>
        <el-table-column
          width="100px"
          align="center"
          prop="payMethod"
          label="装修情况">
          <template slot-scope="scope">
            <el-tag type="primary">{{scope.row.payMethod}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="70px"
          align="center"
          prop="leaseTerm"
          label="租期">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.leaseTerm === 90">三月</el-tag>
            <el-tag v-else-if="scope.row.leaseTerm === 180">半年</el-tag>
            <el-tag v-else-if="scope.row.leaseTerm === 360">一年</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="删除订单" placement="top" :enterable="false">
              <el-button @click="deleteAccount(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"
                         circle></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        v-if="page.total > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
      </el-card>
    </div>
</template>

<script>
  import {getTradeByUser} from '@/api/trade'
    export default {
        name: "Trade",
      data () {
        return {
          page: {
            records: [],
            total: 0,
            size: 0,
            current: 0,
            orders: []
          },
          pageNum: 1,
          pageSize: this.getPageSize(),
          loading: false,
        }
      },
      created () {
        this.init()
      },
      methods: {
        init () {
          const _this = this
          _this.loading = true
          /* 创建组件的时候加载页面信息 */
          getTradeByUser(_this.pageNum, _this.pageSize).then(response => {
            _this.page = response.data
            console.log(_this.page)
          }).finally(() => {
            _this.loading = false
          })
        },

        onSubmit (page = this.pageNum) {
          const _this = this
          getTradeByUser(page, this.pageSize).then(response => {
            _this.page = response.data
          })
        },
        handleSizeChange (val) {
          /* 将value赋值给size, 重新查询数据 */
          this.pageSize = val
          this.onSubmit()
        },
        handleCurrentChange (val) {
          this.pageNum = val
          this.onSubmit()
        },
        // deleteAccount (id) {
        //   this.$confirm('是否删除该房屋信息?', '警告', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then(() => {
        //     const _this = this
        //     deleteHouseInfo(id).then(response => {
        //       _this.init()
        //       _this.RightMessage(_this, '成功', response.message, 'success')
        //     })
        //   }).catch(() => {
        //     this.$message({
        //       type: 'info',
        //       message: '已取消删除房屋'
        //     })
        //   })
        // }
      },
      mounted () {
        // 获取屏幕高度
        document.getElementById('card').style.height = this.getWindowHeight()
      }
    }
</script>

<style scoped>

</style>
